<% content_for :head do %>
  <%= stylesheet_link_tag    :ui %>
  <%= javascript_include_tag :ui %>
  <%= javascript_include_tag :autocomplete %>
  <%= javascript_include_tag :sortable %>

  <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
      function init_properties_sortable() {
        $('ol#properties').sortable({
          items: "li.property",
          update: function(event, ui) {
            $('input.property_position').each(function(index) {
              $(this).val(index + 1);
            });
          }
        });
      }

      init_properties_sortable();

      function send_nested_sets_new_structure(item_id, parent_id, prev_id, next_id){
        jQuery.ajax({
          type: 'POST',
          url: '<%= restructure_admin_property_patterns_path %>',
          data: {parent_id: parent_id,node_id: item_id, prev_id: prev_id, next_id: next_id, authenticity_token: '<%= form_authenticity_token %>'},
          dataType: 'script',
          beforeSend: function(xhr){},
          error: function(xhr, status, error){ alert(error); }
        });//jQuery.ajax
      }

      $('ol.property_attributes').nestedSortable({
        items: "li.property_attribute",
        disableNesting: 'no-nest',
        maxLevels: 4,
        opacity: 0.6,
        revert: 250,
        tabSize: 27,

        update: function(event, ui) {
          item_id   = ui.item.children("div").children(".property_attribute_presentation").attr("node_id");
          parent_id = ui.item.parent().parent("li.property_attribute").children("div").children(".property_attribute_presentation").attr('node_id');
          prev_id   = ui.item.prev("li.property_attribute").children("div").children(".property_attribute_presentation").attr('node_id');
          next_id   = ui.item.next("li.property_attribute").children("div").children(".property_attribute_presentation").attr('node_id');

          send_nested_sets_new_structure(item_id, parent_id, prev_id, next_id);

          //ui.item.children("div").children(".property_attribute_parent_id").val(parent_id);
          //ui.item.children("div").children(".property_attribute_prev_id").val(prev_id);
          //ui.item.children("div").children(".property_attribute_next_id").val(next_id);
        },
        start: function(event, ui) {
            $('#properties').sortable("destroy");
        },
        stop: function(event, ui) {
            init_properties_sortable();
        }
      });
    });
  </script>

  <style type="text/css">
    ol li {
      margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em;
      line-height: 27px;
      cursor: move;
    }
  </style>
<% end %>

<%= form_for([:admin, property_pattern], :validate => true) do |f| %>

    <%= render "shared/error_messages", :target => @property_pattern %>

    <table>
      <tbody>
        <tr>
          <th><%= f.label :presentation %></th>
          <td><%= f.text_field :presentation, :maxlength => 35 %></td>
        </tr>
      </tbody>
    </table>

    <% unless property_pattern.new_record? %>
      <h2>Vlastnosti</h2>

      <ol id="properties">
        <%= f.fields_for :properties do |property| %>
          <%= render "properties", :property => property %>
        <% end %>
      </ol>

      <%= spinner "property" %>
      <%= link_to "Přidat skupinu vlastností", new_property_admin_property_patterns_path(:id => property_pattern.id), :class => "new_button", :id => "property_button", :remote => true %>

      <script type="text/javascript">
        jQuery(function() {
          var toggleSpinner = function() {$("#property").toggle()};

          $("#property_button")
            .bind("ajax:beforeSend", toggleSpinner)
            .bind("ajax:complete", toggleSpinner);
        });
      </script>
    <% end %>

    <%= f.submit %>
  <% end %>